<template>
	<div class="my-home">
		<!-- 二级路由的出口 -->
		<div class="my-home-main">
			<router-view></router-view>
		</div>
		<!-- 底部的tabbar开始 -->
		<div class="my-home-tabbar">
			<van-tabbar
				v-model="active"
				route
				:active-color="icon.active"
				:inactive-color="icon.inactive"
			>
				<van-tabbar-item to="/home/movies">
					<span>电影</span>
					<template #icon="props">
						<svg
							t="1650443279539"
							class="icon"
							viewBox="0 0 1024 1024"
							version="1.1"
							xmlns="http://www.w3.org/2000/svg"
							p-id="2936"
							width="16"
							height="16"
						>
							<path
								d="M844.832 885.344c-30.485333-20.714667-77.781333-18.965333-144.053333 9.386667A425.024 425.024 0 0 1 512 938.666667C276.362667 938.666667 85.333333 747.637333 85.333333 512S276.362667 85.333333 512 85.333333s426.666667 191.029333 426.666667 426.666667a425.013333 425.013333 0 0 1-44.405334 189.717333 32 32 0 0 1-57.301333-28.490666A361.013333 361.013333 0 0 0 874.666667 512c0-200.298667-162.368-362.666667-362.666667-362.666667S149.333333 311.701333 149.333333 512s162.368 362.666667 362.666667 362.666667c56.704 0 111.488-13.013333 161.12-37.653334l1.6-0.746666c84.746667-36.437333 154.176-39.125333 206.08-3.861334a32 32 0 1 1-35.968 52.938667zM512 416a64 64 0 1 1 0-128 64 64 0 0 1 0 128z m160 160a64 64 0 1 1 0-128 64 64 0 0 1 0 128zM512 736a64 64 0 1 1 0-128 64 64 0 0 1 0 128zM352 576a64 64 0 1 1 0-128 64 64 0 0 1 0 128z"
								p-id="2937"
								:fill="props.active ? icon.active : icon.inactive"
							></path>
						</svg>
					</template>
				</van-tabbar-item>
				<van-tabbar-item to="/home/theaters">
					<span>影院</span>
					<template #icon="props">
						<svg
							t="1650443410266"
							class="icon"
							viewBox="0 0 1024 1024"
							version="1.1"
							xmlns="http://www.w3.org/2000/svg"
							p-id="3456"
							width="16"
							height="16"
						>
							<path
								d="M830 831.1h99.1c16.1 0 32.4 2.1 32.2 22.7-0.2 19.3-15.8 20.8-31 20.7-31.9-0.2-63.8-0.1-95.8-0.1-62.7 0-62.7 0-120.6 41.6 11.3 0.8 19 1.7 26.6 1.7 63 0.1 126 0.1 189 0.1 16.2 0 32.6 1.7 31.8 22.6-0.7 18.9-16.5 20.7-31.6 20.7-144.5-0.3-289.1 2.7-433.4-1.7-224-6.9-410.3-183.3-430.2-401.5-21-230.4 126.1-434.3 350.2-485.3 253.3-57.6 509 120.2 541.4 375.9 17.8 140.1-21.1 262.1-114.5 367.3-3.2 3.6-6.2 7.2-13.2 15.3z m90-319.4c-0.3-225.7-182.8-407-409.6-406.9-221.4 0.1-405 185.1-404.4 407.3 0.7 223.7 185.7 407.3 408.7 405.6 224.2-1.7 405.6-183.4 405.3-406z"
								p-id="3457"
								:fill="props.active ? icon.active : icon.inactive"
							></path>
						</svg>
					</template>
				</van-tabbar-item>
				<van-tabbar-item to="/home/profile">
					<span>我的</span>
					<template #icon="props">
						<svg
							t="1650443466941"
							class="icon"
							viewBox="0 0 1024 1024"
							version="1.1"
							xmlns="http://www.w3.org/2000/svg"
							p-id="4339"
							width="16"
							height="16"
						>
							<path
								d="M512 563.2c-127.9744 0-230.4-115.2512-230.4-256s102.4256-256 230.4-256 230.4 115.2512 230.4 256-102.4256 256-230.4 256z m0-51.2c98.2528 0 179.2-91.0592 179.2-204.8s-80.9472-204.8-179.2-204.8-179.2 91.0592-179.2 204.8 80.9472 204.8 179.2 204.8zM128 793.6a179.2 179.2 0 0 1 179.3792-179.2h409.2416C815.6416 614.4 896 694.7328 896 793.6a179.2 179.2 0 0 1-179.3792 179.2H307.3792C208.3584 972.8 128 892.4672 128 793.6z m51.2 0c0 70.5792 57.4464 128 128.1792 128h409.2416A128 128 0 0 0 844.8 793.6c0-70.5792-57.4464-128-128.1792-128H307.3792A128 128 0 0 0 179.2 793.6z"
								p-id="4340"
								:fill="props.active ? icon.active : icon.inactive"
							></path>
						</svg>
					</template>
				</van-tabbar-item>
			</van-tabbar>
		</div>
		<!-- 底部的tabbar结束 -->
	</div>
</template>

<script>
// @ is an alias to /src
import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';
Vue.use(Tabbar);
Vue.use(TabbarItem);
export default {
	data() {
		return {
			active: 0,
			icon: {
				active: '#be3634',
				inactive: '#535353',
			},
		};
	},
	name: 'HomeView',
	components: {},
};
</script>
<style lang="less" scoped>
.my-home {
	// position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;

	.my-home-main {
		flex: 1;
	}

	.my-home-tabbar {
		height: 0.5rem;
	}
}
</style>
